<template>
  <div class="add-post-box">
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
      <template v-for="item in formList">
        <el-form-item
          :key="item.prop"
          :label="item.name"
          :prop="item.prop"
          :class="item.itemClass"
        >
          <component
            :is="item.componentType || 'el-input'"
            v-model="formData[item.prop]"
            :clearable="true"
            v-bind="item.attrConfig || {}"
            @change="handlerSelectData(item)"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'AddPost',
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        name: null,
        responsibility: null,
        remark: null
      },
      formList: [
        {
          name: '岗位名称',
          prop: 'name',
          attrConfig: { placeholder: '请输入岗位名称' }
        },
        {
          name: '职责',
          prop: 'responsibility',
          attrConfig: { placeholder: '请输入职责' }
        },
        {
          name: '描述',
          prop: 'remark',
          itemClass: 'width100p',
          attrConfig: {
            type: 'textarea',
            placeholder: '请输入描述信息',
            maxlength: 500
          }
        }
      ]
    }
  },
  computed: {
    rules() {
      return {
        name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
        responsibility: [
          { required: true, message: '请输入职责', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    popData: {
      handler(data) {
        if (data && data.id) {
          this.formData = { ...data }
        } else {
          this.formData = {
            name: null,
            responsibility: null,
            remark: null
          }
        }
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {}),
        id: this.popData.id || ''
      }
      this.submit(params)
    }
  },
  created() {},
  methods: {
    /**
     * 提交
     */
    submit(params) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          console.log('id', params)
          const { id } = params
          const msg = id ? '编辑成功!' : '新增成功!'
          const apiType = id ? 'update' : 'add'
          const res = await this.$api.postManage[apiType](params)
          if (Number(res.code) === 1000) {
            this.$message.success(msg)
            this.$emit('onFinish', `${apiType}-post`)
          } else if (res.msg) {
            this.$message({ type: 'error', message: res.msg })
          }
        }
      })
    },
    handlerSelectData(config) {
      const Ref = this.$refs[config.prop]
      if (Ref && config.isClosePop) {
        Ref.dropDownVisible = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.add-post-box {
  color: #333;
  padding: 0 20px;

  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
      width: calc(50% - 10px);

      &.width100p {
        width: 100%;
      }
    }

    .el-cascader {
      width: 100%;
    }
  }
}
</style>
